<template>
    <view style="height: 100%">
        <s-nav title="户籍证明"></s-nav>
        <s-content>
            <uni-forms ref="form" :rules="rules" :modelValue="formData">
                <s-card style="padding:12px 0">
                    <view class="cus-margin border">
                        <uni-forms-item  label="姓名" name="name" required label-width="80">
                            <uni-easyinput v-model="formData.name" :inputBorder="false" placeholder="请输入" placeholderStyle="color: #888888;text-align:right;" />
                        </uni-forms-item>
                    </view>
                    <view class="cus-margin border">
                        <uni-forms-item  label="性别" name="gender" required label-width="80">
                            <s-picker placeholder="请选择"  @change="change($event, 'gender')"  :dataSet="genderData" ></s-picker>
                        </uni-forms-item>
                    </view>
                    <view class="cus-margin border">
                        <uni-forms-item  label="民族" name="nation" required label-width="80">
                            <s-picker v-if="!!nationData.length"  @change="change($event, 'nation')" v-model="formData.nation"   placeholder="请选择" :dataSet="nationData" ></s-picker>
                        </uni-forms-item>
                    </view>
                    <view class="cus-margin border">
                        <uni-forms-item  label="所在地区" name="region" required label-width="80">
                            <uni-data-picker placeholder="请选择" v-model="formData.region" popup-title="请选择所在地区" :map="{text:'value',value:'value'}" :localdata="localData" @change="regionChange"></uni-data-picker>
                        </uni-forms-item>
                    </view>
                    <view class="cus-margin border">
                        <uni-forms-item  label="所在社区" name="region" required label-width="80">
                            <uni-easyinput v-model="formData.community" :inputBorder="false" placeholder="请输入" placeholderStyle="color: #888888;text-align:right;" />
                        </uni-forms-item>
                    </view>
                    <view class="cus-margin border">
                        <uni-forms-item  label="详细地址" name="address" required label-width="80">
                            <uni-easyinput v-model="formData.address" :inputBorder="false" placeholder="请输入" placeholderStyle="color: #888888;text-align:right;" />
                        </uni-forms-item>
                    </view>
                    <view class="cus-margin border">
                        <uni-forms-item  label="出生日期" name="birth" required label-width="80">
                            <uni-datetime-picker :border="false" type="date" :value="single" @change="(e)=>change(e,'birth')"/>
                        </uni-forms-item>
                    </view>
                    <view class="cus-margin">
                        <uni-forms-item  label="身份证号" name="cardNum" required label-width="80">
                            <uni-easyinput v-model="formData.cardNum" :inputBorder="false" placeholder="请输入" placeholderStyle="color: #888888;text-align:right;" />
                        </uni-forms-item>
                    </view>
                </s-card>
                <button type="primary" style="margin: 348rpx 24rpx 0 24rpx; background-color: #02B494;" @click="submit">提交</button>
            </uni-forms>
        </s-content>
    </view>
</template>

<script>
import {get,post} from '../../utils/request';
import {REQUEST_SUCCESS_CODE} from '../../constant';
export default {
    data(){
        return {
            params:{},
            formData: {},
            rules: {
                name: {
                    rules: [{
                        required:true,
                        errorMessage: '姓名不能为空'
                    }]
                },
                gender: {
                    rules: [{
                        required:true,
                        errorMessage: '性别不能为空'
                    }]
                },
                nation: {
                    rules: [{
                        required:true,
                        errorMessage: '民族不能为空'
                    }]
                },
                region: {
                    rules: [{
                        required:true,
                        errorMessage: '所在地区不能为空'
                    }]
                },
                community: {
                    rules: [{
                        required:true,
                        errorMessage: '所在社区不能为空'
                    }]
                },
                address: {
                    rules: [{
                        required:true,
                        errorMessage: '详细地址不能为空'
                    }]
                },
                birth: {
                    rules: [{
                        required:true,
                        errorMessage: '出生日期不能为空'
                    }]
                },
                cardNum: {
                    rules: [{
                        required:true,
                        errorMessage: '身份证号不能为空'
                    },
                    {
                        pattern: '^(\\d{18}|\\d{15}|\\d{17}x)$',
                        errorMessage: '请输入正确的身份证号'
                    },]
                },
            },
            genderData:['男','女'],
            regions:[], // 选取的所有区县
            localData:[], //获取的全部区县-树形
            nationData: [], // 获取所有的民族
        }
    },
    onLoad(param){
       const params = JSON.parse(param.params);
       this.params = params;
       this.getNationData();
       this.getRegionData();
    },
    methods: {
        async getNationData(){
            const result = await get('/api/application/xsbsCertifyInfo/app/nationalitylist');
            if(result.code === REQUEST_SUCCESS_CODE) {
                this.nationData = result.data;
            }
        },
        async getRegionData(){
            const result = await get('/api/application/xsbsCertifyInfo/app/areaList',{code: 500100,type: 1});
            if(result.code === REQUEST_SUCCESS_CODE) {
                this.localData = [{text: '重庆市',value:'重庆市',children:result.data}];
            }
        },
         // 提交申请
        async submit () {
            const value = await this.$refs.form.validate();
            const region = this.regions.map(r=>r.value).join('-');
            const result = await post('/api/application/xsbsCertifyInfo/app/saveCertifyInfo',{...this.params,...value,region});
            if(result.code === REQUEST_SUCCESS_CODE) {
                uni.navigateBack({delta: 2})
            }
        },
        regionChange(e){  
            this.regions = e.detail.value;
        },
        change(e,code){
            this.$refs.form.setValue(code,e);
        }
    },
}
</script>

<style lang="scss">
.cus-margin {
    padding: 0 24rpx;
    .uni-forms-item {
        margin-top: 10rpx;
        margin-bottom: 10rpx;
    }
    .uni-forms-item__error {
        top: 25%;
    }

    .picker-text {
        color: #888888;
    }

    .input-value-border {
        border:none;
    }
    .selected-area  {
        justify-content: flex-end;
    }

    .icon-calendar {
        display: none;
    }
    .uni-date__x-input {
        text-align: right;
    }
}
.border {
    border-bottom: 2rpx solid #E8E8E8;
}
</style>